<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>学校名称:</span>
        <select class="select" v-model="nameSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(key, item) in nameOption" :label="key" :value="key"></option>
        </select>
        <span>学校类型:</span>
        <select class="select" v-model="typeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(key, item) in typeOption" :label="key" :value="item"></option>
        </select>
        <span>学校状态:</span>
        <select class="select" v-model="stuSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(key, item) in stuOption" :label="key" :value="item"></option>
        </select>
        <el-button type="primary" size="small" @click="nSearch">确定</el-button>
        <el-button type="primary" size="small" @click="clearSelect">重置</el-button>
        <div class="right">
          <el-button type="success" size="small" @click="newShow">新建</el-button>
        </div>
      </div>
    </div>

    <div class="model list">
      <img :src="IMGBASE64.XIAOCHEXIANLU2X" class="pink">
      <span class="title">学校管理</span>
      <div class="kong"></div>
      <el-table :data="tableData" style="width: 100%" @cell-click="showDetails">
        <el-table-column prop="id" label="#" min-width="40" align="center"></el-table-column>
        <el-table-column prop="schoolName" label="学校名称" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="linkName" label="联系人" min-width="" align="center"></el-table-column>
        <el-table-column prop="telphone1" label="联系电话1" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="telphone2" label="联系电话2" min-width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="typt" label="学校类型" min-width="" align="center"></el-table-column>
        <el-table-column prop="status2" label="学校状态" min-width="" align="center"></el-table-column>
        <el-table-column prop="createTime2" label="签约时间" width="" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column prop="updateTime2" label="到期时间" align="center" :show-overflow-tooltip='true'></el-table-column>
        <el-table-column label="二维码" align="center">
          <template scope="scope">
            <el-button size="small">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" min-width="">
          <template scope="scope">
            <el-button size="small">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-show="paging"
        @current-change="handleCurrentChange"
        :page-size="20"
        layout="prev, pager, next, jumper"
        :total="total"
        class="pull-right">
      </el-pagination>
    </div>

    <div class="details" v-show="bukexiugai">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="el-icon-close" class="close" @click="upShowBU()"></el-button>
      <div class="content">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="学校名称">
              <span>{{form.schoolName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="学校类型">
              <span>{{form.type}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="学校状态">
              <span>{{form.typt}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人">
              <span>{{form.people}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="联系方式1">
              <span>{{form.telphone1}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="联系方式2">
              <span>{{form.telphone2}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="签约时间">
              <span>{{form.Qtime}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="到期时间">
              <span>{{form.Etime}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="省份">
              <span>{{form.province}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="9">
            <el-form-item label="城市">
              <span>{{form.city}}</span>
            </el-form-item>  
          </el-col>
          <el-col :span="24">
            <el-form-item label="学校地址">
              <span>{{form.schoolAddre}}</span>
            </el-form-item>  
          </el-col>
        </el-form>
      </div>
      <!-- <img :src="LBTIMGBASE64.ERWEIMA" class="erweima"> -->
    </div>

    <div class="details" v-show="kexiugai">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">修改</span>
      <el-button icon="el-icon-close" class="close" @click="upShow()"></el-button>
      <div class="content">
        <el-form label-width="88px">
          <el-col :span="24">
            <el-form-item label="学校名称">
              <input type="text" class="text" v-model="changeForm.schoolName">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系人">
              <input type="text" class="text" v-model="changeForm.people">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话1">
              <input type="text" class="text" v-model="changeForm.telphone1">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话2">
              <input type="text" class="text" v-model="changeForm.telphone2">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学校类型">
              <el-select v-model="changeForm.typt" size="small">
                <el-option v-for="(item, key) in typeOption" :label="item" :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学校状态">
              <el-select v-model="changeForm.status" size="small">
                <el-option v-for="(item, index) in stuOption" :label="item" :value="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="学校地址">
              <input type="text" class="text" v-model="changeForm.schoolAddre">
            </el-form-item>
          </el-col>
          <!-- <el-col :span="24">
            <span>登录地址:</span>
            <input type="text" class="text">
          </el-col> -->
          <el-col :span="24">
            <div class="bottom">
              <button class="btn btn-danger" @click="changeData">确认</button>
            </div>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="up" v-show="newshow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="img">
      <span class="title">新增学校</span>
      <el-button icon="el-icon-close" class="close" @click="newShow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <div class="content">
        <el-form ref="form" :model="form" label-width="90px">
          <el-col :span="13">
            <el-form-item label="学校名称">
              <input type="text" v-model="form.schoolName">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学校类型">
              <el-select v-model="form.schoolTyple" @change="Stype" size="small">
                <el-option v-for="(item, key) in typeOption" :label="item" :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学校状态">
              <el-select v-model="form.schoolStatus" @change="Sstatu" size="small">
                <el-option v-for="(item, key) in stuOption" :label="item" :value="key"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="联系人">
              <input type="text" v-model="form.linkName">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话1">
              <input type="text" v-model="form.telphone1">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话2">
              <input type="text" v-model="form.telphone2">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="签约时间">
              <template class="dataChoose">
                <el-date-picker
                  format="yyyy-MM-dd"
                  ref="Qdate"
                  v-model="form.signTime"
                  type="date"
                  placeholder="选择日期"
                  size="small"
                  @change="getQData">
                </el-date-picker>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期时间">
              <template class="dataChoose">
                <el-date-picker
                  format="yyyy-MM-dd"
                  ref="Ddate"
                  v-model="form.signEndTime"
                  type="date"
                  placeholder="选择日期"
                  size="small"
                  @change="getDData">
                </el-date-picker>
              </template>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="省份">
              <input type="text" v-model="form.province">
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城市">
              <input type="text" v-model="form.city">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="学校地址">
              <input type="text" v-model="form.schoolAddre">
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="学校LOGO">
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :auto-upload='false'
                :multiple='true'>
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog size="tiny">
                <img width="100%" alt="">
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
      <el-col :span="24">
        <div class="bottom">
          <div class="right">
            <el-button type="success" @click="subNew" size="small">确定</el-button>
            <el-button @click="newShow" size="small">取消</el-button>
          </div>
        </div>
      </el-col>
    </div>

    <div class="imgup" v-show="imgshow">
      <el-button icon="el-icon-close" class="close" @click="imgShow()"></el-button>
      <img :src="LBTIMGBASE64.ERWEIMA" class="erweima">
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="upshow"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      total: 0,
      page: 1,
      paging: true,
      bukexiugai: false,
      kexiugai: false,
      upshow: false,
      newshow: false,
      imgshow: false,
      nameSelect: null,
      nameOption: [],
      typeSelect: null,
      stuSelect: null,
      stuOption: {'0': '服务停止', '1': '正常', '2': '欠费'},
      typeOption: {'1': '私立', '2': '公立'},
      schoolName: null,
      tableData: [],
      form: {
        schoolName: null,
        schoolTyple: null,
        typle: null,
        linkName: null,
        province: null,
        city: null,
        schoolAddre: null,
        schoolStatus: null,
        status: null,
        typt: null,
        telphone1: null,
        telphone2: null,
        signTime: null,
        signEndTime: null,
        logoUrl: null
      },
      changeForm: {
        id: null,
        schoolName: null,
        schoolAddre: null,
        province: null,
        city: null,
        status: null,
        typt: null,
        telphone1: null,
        telphone2: null,
        logoUrl: null,
        domainUrl: null,
        token: null,
        appid: null,
        appsecret: null
      }
    }
  },
  mounted () {
    this.$http.post(this._httpUrl + 'sys/school/manage/page/query', {
      page: this.page,
      rows: 20
    }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
      if (response.body.code === '000') {
        this.tableData = response.data.data.results
        let asdf = []
        for (var i = 0; i < this.tableData.length; i++) {
          this.tableData[i].createTime2 = this.changeTime(this.tableData[i].signTime)
          this.tableData[i].updateTime2 = this.changeTime(this.tableData[i].signEndTime)
          if (this.tableData[i].schoolType === 1) {
            this.tableData[i].typt = '私立'
          } else {
            this.tableData[i].typt = '公立'
          }
          if (this.tableData[i].status === 0) {
            this.tableData[i].status2 = '服务停止'
          } else if (this.tableData[i].status === 1) {
            this.tableData[i].status2 = '正常'
          } else {
            this.tableData[i].status2 = '欠费'
          }
          asdf.push(this.tableData[i].schoolName)
        }
        this.nameOption = asdf
      } else if (response.body.code === '887') {
        this.$router.push('/')
      } else if (response.body.code === '889') {
        this.$router.push('/')
      }
    })
  },
  methods: {
    Stype () {
      if (this.form.schoolTyple === '私立') {
        this.form.typle = 1
      } else if (this.form.schoolTyple === '公立') {
        this.form.typle = 2
      } else {
        this.form.typle = null
      }
    },
    Sstatu () {
      if (this.form.schoolStatus === '服务停止') {
        this.form.status = 0
      } else if (this.form.schoolStatus === '正常') {
        this.form.status = 1
      } else if (this.form.schoolStatus === '欠费') {
        this.form.status = 2
      } else {
        this.form.status = null
      }
    },
    changeTime (value) {
      if (value != null) {
        var date = new Date(value)
        return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
      } else {
        return null
      }
    },
    clearSelect () {
      this.nameSelect = null
      this.typeSelect = null
      this.stuSelect = null
    },
    subNew () {
      this.xtoken = {'yxt-xtoken': localStorage.xtoken}
      this.$http.post(this._httpUrl + 'sys/school/manage/addSchool', {
        schoolName: this.form.schoolName,
        schoolType: this.form.typle,
        city: this.form.city,
        province: this.form.province,
        schoolAddr: this.form.schoolAddre,
        linkName: this.form.linkName,
        status: this.form.status,
        telphone1: this.form.telphone1,
        telphone2: this.form.telphone2,
        signTimeStr: this.form.signTime,
        signEndTimeStr: this.form.signEndTime,
        logoUrl: this.form.logoUrl
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.xtoken = {'yxt-xtoken': localStorage.xtoken}
          this.$http.post(this._httpUrl + 'sys/school/manage/page/query', {
            'page': this.page,
            'rows': 20
          }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
            if (response.body.code === '000') {
              this.tableData = response.data.data.results
              let asdf = []
              for (var i = 0; i < this.tableData.length; i++) {
                this.tableData[i].createTime2 = this.changeTime(this.tableData[i].signTime)
                this.tableData[i].updateTime2 = this.changeTime(this.tableData[i].signEndTime)
                if (this.tableData[i].schoolType === 1) {
                  this.tableData[i].typt = '私立'
                } else {
                  this.tableData[i].typt = '公立'
                }
                if (this.tableData[i].status === 0) {
                  this.tableData[i].status2 = '服务停止'
                } else if (this.tableData[i].status === 1) {
                  this.tableData[i].status2 = '正常'
                } else {
                  this.tableData[i].status2 = '欠费'
                }
                asdf.push(this.tableData[i].schoolName)
              }
              this.nameOption = asdf
            } else if (response.body.code === '887') {
              this.$router.push('/')
            } else if (response.body.code === '889') {
              this.$router.push('/')
            }
          })
          this.newshow = !this.newshow
          this.upshow = !this.upshow
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    nSearch () {
      this.$http.post(this._httpUrl + 'sys/school/manage/page/query', {
        page: this.page,
        rows: 20,
        schoolName: this.nameSelect,
        schoolType: this.typeSelect,
        status: this.stuSelect
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.results
          let asdf = []
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].createTime2 = this.changeTime(this.tableData[i].signTime)
            this.tableData[i].updateTime2 = this.changeTime(this.tableData[i].signEndTime)
            if (this.tableData[i].schoolType === 1) {
              this.tableData[i].typt = '私立'
            } else {
              this.tableData[i].typt = '公立'
            }
            if (this.tableData[i].status === 0) {
              this.tableData[i].status2 = '服务停止'
            } else if (this.tableData[i].status === 1) {
              this.tableData[i].status2 = '正常'
            } else {
              this.tableData[i].status2 = '欠费'
            }
            asdf.push(this.tableData[i].schoolName)
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    handleCurrentChange (val) {
      this.page = val
      this.getStudentNameData()
    },
    upShowBU () {
      this.upshow = !this.upshow
      this.bukexiugai = !this.bukexiugai
    },
    upShow () {
      this.upshow = !this.upshow
      this.kexiugai = !this.kexiugai
    },
    newShow () {
      this.newshow = !this.newshow
      this.upshow = !this.upshow
    },
    imgShow () {
      this.upshow = !this.upshow
      this.imgshow = !this.imgshow
    },
    showDetails (rows, column) {
      if (column.label === '操作') {
        this.upshow = !this.upshow
        this.kexiugai = !this.kexiugai
        this.changeForm.id = rows.id
        this.changeForm.schoolName = rows.schoolName
        this.changeForm.people = rows.linkName
        this.changeForm.telphone1 = rows.telphone1
        this.changeForm.telphone2 = rows.telphone2
        this.changeForm.status = rows.status2
        for (var j in this.stuOption) {
          if (this.changeForm.status === this.stuOption[j]) {
            this.changeForm.status = j
          }
        }
        this.changeForm.Qtime = rows.createTime2
        this.changeForm.typt = rows.typt
        for (var i in this.typeOption) {
          if (this.changeForm.typt === this.typeOption[i]) {
            this.changeForm.typt = i
          }
        }
        this.changeForm.schoolAddre = rows.schoolAddr
      } else if (column.label === '二维码') {
        this.upshow = !this.upshow
        this.imgshow = !this.imgshow
      } else {
        this.upshow = !this.upshow
        this.bukexiugai = !this.bukexiugai
        this.form.schoolName = rows.schoolName
        this.form.people = rows.linkName
        this.form.telphone1 = rows.telphone1
        this.form.telphone2 = rows.telphone2
        this.form.type = rows.typt
        this.form.typt = rows.status2
        this.form.Qtime = rows.createTime2
        this.form.Etime = rows.updateTime2
        this.form.schoolAddre = rows.schoolAddr
        this.form.province = rows.province
        this.form.city = rows.city
      }
    },
    changeData () {
      this.$http.post(this._httpUrl + 'sys/school/manage/updateSchool', {
        id: this.changeForm.id,
        schoolName: this.changeForm.schoolName,
        schoolAddr: this.changeForm.schoolAddre,
        linkName: this.changeForm.people,
        province: this.changeForm.province,
        city: this.changeForm.city,
        status: this.changeForm.status,
        telphone1: this.changeForm.telphone1,
        telphone2: this.changeForm.telphone2,
        logoUrl: this.changeForm.logoUrl,
        domainUrl: this.changeForm.domainUrl,
        token: this.changeForm.token,
        appid: this.changeForm.appid,
        appsecret: this.changeForm.appsecret,
        schoolType: this.changeForm.typt
      }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.xtoken = {'yxt-xtoken': localStorage.xtoken}
          this.$http.post(this._httpUrl + 'sys/school/manage/page/query', {
            'page': this.page,
            'rows': 20
          }, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
            if (response.body.code === '000') {
              this.tableData = response.data.data.results
              let asdf = []
              for (var i = 0; i < this.tableData.length; i++) {
                this.tableData[i].createTime2 = this.changeTime(this.tableData[i].signTime)
                this.tableData[i].updateTime2 = this.changeTime(this.tableData[i].signEndTime)
                if (this.tableData[i].schoolType === 1) {
                  this.tableData[i].typt = '私立'
                } else {
                  this.tableData[i].typt = '公立'
                }
                if (this.tableData[i].status === 0) {
                  this.tableData[i].status2 = '服务停止'
                } else if (this.tableData[i].status === 1) {
                  this.tableData[i].status2 = '正常'
                } else {
                  this.tableData[i].status2 = '欠费'
                }
                asdf.push(this.tableData[i].schoolName)
              }
              this.nameOption = asdf
            } else if (response.body.code === '887') {
              this.$router.push('/')
            } else if (response.body.code === '889') {
              this.$router.push('/')
            }
          })
          this.upshow = !this.upshow
          this.kexiugai = !this.kexiugai
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getQData () {
      this.form.signTime = this.$refs.Qdate.displayValue
      console.log(this.form.signTime)
    },
    getDData () {
      this.form.signEndTime = this.$refs.Ddate.displayValue
      console.log(this.form.signEndTime)
    }
  }
}
</script>

<style scoped>
  div[data-v-05da9316] ul
  {
    position: relative;
    left: 12%;
  }
  .el-upload--picture-card
  {
    /*margin-left: 16%;*/
    margin-top: 40px;
    width: 80px; height: 80px;
  }
  .el-upload--picture-card i
  {
    /*position: relative; top: -28px;*/
  } 
</style>

<style lang="less" scoped>
@import '/static/css/all-use.css';
@import '/static/css/material-dashboard.css';
  .retrieval{
    .body{
      span{
        margin-left: 4%;
      }
      span:first-child{
        margin-left: 0;
      }
      .firstSelect{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .select{
        width: 15%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      input{
        margin-left: 4%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .right{
        width: 8%;
        float: right;
      }
    }
  }
  .details{
    .content{
      margin-left: 4%;
      padding: 20px 0 15px 0;
    }
    .text{
      border: 0;
      border-bottom: 1px solid #d7d7d7;
    }
    .bottom{
      text-align: center;
    }
    select{
      width: 60%;
    }
    .kong{
      padding: 10px;
    }
    .kong-top{
      padding-top: 5px;
    }
  }

  .up{
    width: 65% !important;
    position: absolute !important;
    top: 10% !important;
    left: 50% !important;
    margin-left: -33% !important;
    background: #FFF !important;
    padding: 20px 20px 0 20px !important;
    border-radius: 5px !important;
    z-index: 99999 !important;
    .img{
      position: absolute;
      left: 24px;
      top: -25px;
    }
    .title{
      margin-left: 96px;
    }
    .header{
      height: 24px;
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 1%;
      margin-right: 10px;
      margin-bottom: 10px;
      .title{
        height: 24px;
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 10px 10px 10px;
        margin-left: 0;
      }
    }
    .content{
      margin-left: 3%;
      margin-top: 30px;
      input{
        width: 70%;
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
      select{
        width: 70%;
        border: 0;
        border-bottom: 1px solid #d7d7d7;
      }
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .right{
        text-align: right;
        margin-right: 4%;
      }
    }
  }

  .imgup{
    width: 20%;
    height: 300px;
    position: fixed;
    top: 100px;
    left: 50%;
    margin-left: -10%;
    background: #FFF;
    border-radius: 5px;
    padding: 20px;
    z-index: 99999;
    .erweima{
      width: 150px;
      height: 150px;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -75px;
      margin-top: -75px;
    }
  }
</style>
